<template>
    <div class="text-center">
        <div class="row">
            <div class="cord-body">
                <h4 class="caption">能源信息管理系统</h4>
                <div class="aaA">
                    <div class="glyphicon">
                        <svg-icon
                                :icon-class="'user'"
                                style="cursor: pointer;color:#248dc1;font-size:20px;"
                        ></svg-icon>
                        <span
                                style="position: relative;    top: 18%;left: 20%;color:#248dc1;"
                        >|</span
                        >
                    </div>
                    <input
                            type="text"
                            v-model="login_name"
                            placeholder="   请输入账号"
                    /><!--使用v-model 双向绑定-->
                </div>
                <div class="bb">
                    <div class="glyphicon">
                        <svg-icon
                                :icon-class="'password'"
                                style="cursor: pointer;color:#248dc1;font-size:20px;"
                        ></svg-icon>
                        <span
                                style="position: relative;    top: 18%;left: 20%;color:#248dc1;"
                        >|</span
                        >
                    </div>
                    <input
                            :type="this.passShow ? 'text' : 'password'"
                            v-model="pwd"
                            placeholder="   请输入密码"
                    />

                    <!--通过data中的passShow来控制是否显示密码 用:type的形式可以直接使用JavaScript表达式来动态定义 -->
                    <!--使用svg-icon 为公用的矢量图使用模块 通过icon-class 来来选择导入的矢量图 所有矢量图全部存放在@/icons/svg下 如果需要添加新的矢量图全部放入此处-->
                    <svg-icon
                            :icon-class="this.passShow ? 'eye-open' : 'eye'"
                            @click.native="showPass"
                            style="cursor: pointer;color:#248dc1;font-size:22px;"
                    ></svg-icon>
                </div>
                <div class="cc">
                    <!--显示密码的按钮也需要进行对应的变动 -->
                    <el-button type="success" class="elbutton" @click="submit"
                    >提交
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                login_name: "",
                pwd: "",
                passShow: false
            };
        },
        created: function () {
            var _this = this;
            document.onkeydown = function () {
                let key = window.event.keyCode;
                if (key == 13) {
                    _this.submit();
                }
            };
        },
        methods: {
            submit: function () {
                let compponents = this; //声明一个变量赋值为this，以便在axios.post方法的作用域中使用。
                const h = this.$createElement;
                compponents.$axios
                    .post("/signIn", {loginName: this.login_name, pwd: this.pwd})
                    .then(function (response) {
                        /*发送输入的登陆名和密码到后台。后台则返回用户信息以及生成的token*/
                        let result = response.data;
                        if (result.success) {
                            let {userInfo} = result; //{userInfo} = result 的语法形式 等同于 let userInfo=result.userInfo
                            let {token} = result;
                            compponents.$store.dispatch("user/setToken", token); //通过调用Stroe中的user modules 声明的 setToken 将token 在vuex中定义 以便后期随时调用
                            compponents.$store.dispatch("user/setUserInfo", userInfo); //通过调用Stroe中的user modules 声明的 setUserInfo 将t用户信息 在vuex中定义 以便后期随时调用
                            compponents.$router.push("/");
                            compponents.$message({
                                message: h("p", null, [
                                    h("i", {style: "color: green"}, "通过: "),
                                    h("i", {style: "color: blue"}, `登录成功喽`)
                                ])
                            });
                        } else {
                            compponents.$message({
                                message: h("p", null, [
                                    h("i", {style: "color: red"}, "错误: "),
                                    h("i", {style: "color: gray"}, result.message)
                                ])
                            });
                        }
                    })
                    .catch(function (error) {
                        compponents.$message({
                            message: h("p", null, [
                                h("i", {style: "color: red"}, "错误: "),
                                h("i", {style: "color: gray"}, error)
                            ])
                        });
                    });
            },
            showPass() {
                this.passShow = !this.passShow;
            }
        }
    };
</script>

<style scoped>
    .text-center {
        text-align: center !important;
    }

    .row {
        border-radius: 3px;
        width: 467px;
        height: 470px;
        margin-top: 213px;
        margin-left: 1265px;
        background-color: rgba(1, 53, 97, 0.5);
        position: absolute;
        border: solid 1px #1075b0;
        box-shadow: 0px 20px 40px 0px rgba(5, 192, 255, 0.2) inset;
    }

    .caption {
        font-family: tikinFont;
        margin: 0px;
        margin-bottom: 8%;
        color: #00befe;
        font-size: 28px;
        font-weight: bold;
        letter-spacing: 4px;
    }

    .cord-body {
        padding-top: 3%;
        padding-bottom: 45px;
        height: 460px;
        flex: 1 1 auto;
        padding: 4rem 1.5rem 4rem 1.5rem;
    }

    input {
        border: solid 1px #248dc1;
        color: #248dc1;
        background: #001a40;
        height: 41px;
        border-radius: 22px;
        font-size: 16px;
        padding-left: 80px;
        font-family: tikinFont;
        width: 281px;
        outline: none;
    }

    button {
        border-radius: 22px;
        background: linear-gradient(to right, #07a6e3, #05b6f5);
        border-color: #5294ee;
        height: 45px;
        font-size: 18px;
        font-family: tikinFont;
        width: 363px;
    }

    .glyphicon {
        width: 11%;
        height: 10.6%;
        border-radius: 5px 0px 0px 5px;
        position: relative;
        top: 34.8px;
        left: -39.26%;
        display: inline-block;
        font-family: "Glyphicons Halflings";
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        color: #c8c8c8c8;
        font-size: 22px;
        -webkit-font-smoothing: antialiased;
    }

    .aaA {
        margin: 0px 20px 2% 20px;
    }

    .bb {
        margin: 0px 0px 15% 20px;
    }

    .cc {
        margin: 0px 20px 2% 20px;
    }

    /*el-button*/
    .elbutton:hover {
        background: linear-gradient(to right, #07a6e3, #05b6f5);
        border-color: #5294ee;
    }

    input:focus {
        border-color: #5294ee;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px #5294ee, 0 0 8px #5294ee;
        box-shadow: inset 0 1px 1px #5294ee, 0 0 8px #5294ee;
    }

    .el-button--success {
        color: #fff;
        background: linear-gradient(to right, #07a6e3, #05b6f5);
        border-color: #07a6e3;
    }
</style>
